<template>
	<view class="homeDesign">
		<view class="homeDesign_body" @tap="toDetail">
			<view class="author_message">
				<text class="two_ellipsis">{{message.softTitle}}</text>
			</view>
			<view class="homeDesign_img">
				<view>
					<text>{{message.softStyle}}</text>
				</view>
				<image :src="message.coverImage" mode="aspectFill" lazy-load></image>
			</view>
		</view>
		<view class="homeDesign_button">
			<view  @tap="toCollect">
				<image :src="message.collection==0?loved:love" ></image>
				<text :class="{isDoed:message.collection==0}">{{message.collectionNumber>0?message.collectionNumber:'收藏'}}</text>
			</view>
			<view @tap="toAnswer">
				<image src="/static/svg/comments.svg" ></image>
				<text>{{message.discussNumber>0?message.discussNumber:'评论'}}</text>
			</view>
			<view @tap="toPraise">
				<image :src="message.zan==0?praised:praise"  ></image>
				<text :class="{isDoed:message.zan==0}">{{message.zanNumber>0?message.zanNumber:'点赞'}}</text>
			</view>
			<view @tap='toshare'>
				<image src="/static/svg/share.svg" ></image>
				<text>分享</text>
			</view>
		</view>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	export default {
		name:"softProducts",
		data() {
			return {
				isLove:true,
				isPraise:true,
				love:require('@/static/svg/love.svg'),
				loved:require('@/static/svg/love1.svg'),
				praise:require('@/static/svg/praise.svg'),
				praised:require('@/static/svg/praise1.svg'),
			}
		},
		props: {
			id: {
				type:String,
				default:""
			},
			isInPerSonal: {
				type:Boolean,
				default:false
			},
			message: {
				type: Object,
				default(){
				    return {}
				}
			},
			index: {
				type: Number,
				default: 0
			},
			isIndex: {
				type:Boolean,
				default:false
			},
			isInDetail: {
				type:Boolean,
				default:false
			},
		},
		created() {

		},
		methods:{
			toDetail(){
				uni.navigateTo({
					url: '/pages/softProducts/softProductsIndex?id='+this.message.softId+'&softStyle='+this.message.softStyle+"&softPlace="+this.message.softPlace
				})
			},
			async toCollect(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				data.softId=this.message.softId
				data.userId=localStorage.getItem('userId')
				data.category=2
				data.state=0
				let res
				if(this.message.collection!=0){
					res=await urls.softfabulous(data)
					if(res.code==0){
						this.$emit('collect',this.index,true)
					}
				}else{
					res=await urls.softreduceZan(data)
					if(res.code==0){
						this.$emit('collect',this.index,false)
					}
				}	
			},
			toAnswer(){
				if(this.isIndex){
					this.toDetail()
				}
			},
			async toPraise(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				data.softId=this.message.softId
				data.userId=localStorage.getItem('userId')
				data.category=2
				data.state=1
				let res
				if(this.message.zan!=0){
					res=await urls.softfabulous(data)
					if(res.code==0){
						this.$emit('praise',this.index,true)
					}
				}else{
					res=await urls.softreduceZan(data)
					if(res.code==0){
						this.$emit('praise',this.index,false)
					}
				}	
				
			},
			async toshare(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let data={}
				data.softId=this.message.softId
				data.userId=localStorage.getItem('userId')
				data.category=2
				data.state=3
				let res
				res=await urls.softfabulous(data)
				if(res.code==0){
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.homeDesign{
		width: 750rpx;
		min-width: 750rpx;
		margin-top: 30rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
	}
	.homeDesign_body{
		padding: 30rpx;
		border-bottom:1rpx solid #EEEEEE;
		.author_message{
			max-height: 92rpx;
			text{
				font-size: 28rpx;
				color: #333333;
				letter-spacing: 1rpx;
				line-height: 46rpx;
				font-weight: bold;
			}
		}
		.homeDesign_img{
			height: 320rpx;
			width: 690rpx;
			margin-top: 30rpx;
			position: relative;
			view{
				position: absolute;
				left: 0;
				top: 0;
				height: 44rpx;
				opacity: 0.8;
				background-color: #D7BD9F;
				border-top-left-radius: 9rpx;
				z-index: 2;
				text{
					line-height:44rpx ;
					font-size: 24rpx;
					color: #704F29;
					letter-spacing: 1rpx;
					padding:0 16rpx;
					display: block;
				}
			}
			image{
				height: 100%;
				width: 100%;
				border-radius: 9rpx;
			}
		}
	}
	.homeDesign_button{
		height: 84rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		justify-content: space-between;
		view{
			display: flex;
			align-items: center;
			height: 100%;
			text{
				font-size: 24rpx;
				color: #666666;
				letter-spacing: 1rpx;
				margin-left: 8rpx;
			}
			image{
				height: 28rpx;
				width: 28rpx;
			}
			.isDoed{
				color: #B3392B;
			}
		}
	}
</style>
